<template>
  <q-list dense class="menu-container">
    <q-expansion-item
        v-for="menu in menuList"
        :key="menu.id"
        clickable
        expand-separator
        :label="menu.label"
        :expand-icon-class="(menu.children && menu.children.length > 0) ? '' : 'hidden'"
      >
        <q-separator/>
        <div  class="menu-group">
          <template v-for="item in menu.children" :key="item.id">
             <div class="menu-item" draggable="true" @dragstart="onDragStart($event, item)">
                <div class="menu-item-icon">
                  <template v-if="findCatalogLabel(graphTypeList, item.graphTypeId) === '图元'">
                    <q-avatar size="25px">
                      <img :src="item.graphUrl">
                    </q-avatar>
                  </template>
                  <template v-else>
                    <q-icon :name="item.graphUrl" size="25px" />
                  </template>
                </div>
                <div class="menu-item-text">{{item.label}}</div>
              </div>
          </template>
        </div>
      </q-expansion-item>
  </q-list>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref, toRefs, PropType } from 'vue';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';
import { useUivCatalogTbl } from 'src/hook/editor/useUivCatalogTbl';
import { uivCatalogType } from 'src/util/UivBaseConst';
import { CMenuItemVO, getMenuTree } from 'src/hook/layout/getMenuTree';

export default defineComponent({
  name: 'ToolBox',
  props: {
    menuList: {
      type: Array as PropType<CMenuItemVO[]>,
      required: true
    }
  },
  setup (props, context) {
    //数据解构
    const {
      menuList
    } = toRefs(props);

    const {
      findCatalogLabel
    } = useCatalogTool();

    const {
      convertToMenuTreeItem
    } = getMenuTree();

    //系统相关
    const {
      graphTypeList,
      getUivCatalog,
      removeUivCatalog
    } = useUivCatalogTbl();

    // 拖拽
    const onDragStart = (event: DragEvent, item: CMenuItemVO) => {
      if (event.dataTransfer) {
        let map = convertToMenuTreeItem(item.sid);
        if (map !== null) {
          console.log(item.sid);
          event.dataTransfer.setData('component-create', map.sonId.toString());
        }
      }
    }

    //挂载组件
    onMounted(() => {
      getUivCatalog(uivCatalogType.GRAPH_TYPE_CODE);
    })

    //卸载组件
    onUnmounted(() => {
      removeUivCatalog(uivCatalogType.GRAPH_TYPE_CODE);
    })

    return {
      menuList,
      graphTypeList,
      findCatalogLabel,
      onDragStart
    };
  }
});

</script>

<style lang="scss" scoped >
.menu-container {
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;

  .menu-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    background-color: #d9e9ec;

    .menu-item {
      width: 50px;
      padding: 3px;
      color: #444343;
      font-size: 10px;
      border: transparent solid 1px;
      &.base {
        width: 54px;
      }

      .menu-item-icon {
        text-align: center;
      }

      .menu-item-text {
        margin-top: 5px;
        text-align: center;
      }
    }

    .menu-item:hover {
      border: #ccc solid 1px;
      background: #00aefe;   //#ccc;
      color: #fdf8f8;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
</style>
